<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <parent :title="title"></parent>
    </div>
    <template id="parent">
        <div>
            <h2>{{title}}</h2>
            <h2>{{count}}--parent</h2>
            <button @click="changcount">改变count</button>
            <h2>{{msg}}</h2>
            <hr>
            <childone :title="title" :count="count" ref="childone" @changmsg="newmsg" :setmsg="setmsg"></childone>
            <hr>
            <childtwo :msg="msg" :count="count" ref="childtwo" :num="num"></childtwo>
        </div>
    </template>
    <template id="childone">
        <div>
            <h2>{{title}}</h2>
            <h2>{{count}}</h2>
            <input type="text" @input="changmsg">
            <!--自定义事件 父子都有一个函数,子在父绑定一个自定义事件,然后子点击触发子函数,子函数meit发送到父函数接收修改-->
            <button @click="changecount2">$parent改变父组件</button>
            <!--子有一个函数事件触发通过parent直接修改-->
            <input type="text" @input="setmsg('哈哈哈')">
            <!--//反向props 通过props接收-->
            <button @click="changetwomse">通过总线改变</button>
        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>{{msg}}--组件2</h2>
            <h2>{{num}}</h2>
            <h2>{{mymsg}}</h2>
        </div>
    </template>
</body>
<script>
    const bus = new Vue()  // 空的Vue 实例对象 
    Vue.component('parent', {
        template: "#parent",
        data() {
            return {
                count: 2022,
                msg: "好好学习",
                num: 520
            }
        },
        methods: {
            changcount() {
                this.$refs.childone.count++;
                console.log(this.count)
                // this.$refs.childtwo.count++
            },
            newmsg(msg) {
                this.msg = msg
            },
            setmsg(msg) {
                this.msg = msg
            }
        },
        props: ['title'],
        computed: {

        }
    })
    //子组件1
    Vue.component('childone', {
        template: "#childone",
        props: ['title', 'count', 'msg', 'setmsg'],
        methods: {
            changmsg(e) {
                this.$emit('changmsg', e.target.value)
            },
            changecount2() {
                this.$parent.num++
            },
            changetwomse() {
                bus.$emit('changetwomse', '好好学习!!!!!');
            }
        }
        , data() {
            return {
                onemsg: "你很棒哦!"
            }
        }
    })
    //子组件2
    Vue.component('childtwo', {
        template: "#childtwo",
        props: ['msg', 'count', 'num'],
        data() {
            return {
                mymsg: "你好呀!兄弟"
            }
        },
        created() {
            bus.$once('changetwomse', msg => {
                this.mymsg = msg
            })
        }
    })
    const vm = new Vue({
        // el:"#app",
        components: {
        },
        data: {
            title: "Vue 组件初步 (组件通信 - props ) ",
            msg: "小型、独立和通常可复用的组件构建大型应用",
        },
        mounted() {
            document.getElementsByTagName('title')[0].innerHTML = this.title;

        },

    }).$mount("#app")
</script>

</html>